<template>
	<view class="qilin-box-videoList">
		<swiper class="qilin-box-videoList-swiper" vertical @change="changeSwiper" @touchstart="touchStart" @touchend="touchEnd">
			<swiper-item v-for="(item,index) in list" :key="item.id">
				<view class="qilin-box-item">
					<video-player ref="video" :video="item" :index="index" @changeDblClick="changeDblClick(index)"></video-player>
				</view>
				<text-detail :item="item"></text-detail>
				<right-operate ref="rightOperate" :item="item"></right-operate>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import VideoPlayer from "./videoPlayer.vue";
	import TextDetail from "./textDetail.vue";
	import RightOperate from "./rightOperate.vue";
	let timer=null;
	export default {
		name:"videoList",
		props:["list"],
		components:{
			VideoPlayer,
			TextDetail,
			RightOperate
		},
		data() {
			return {
				touchStartY:0,//触摸开始距离顶部距离
				touchEndY:0,//触摸结束距离顶部距离
				currentVideoIndex:0,//当前视频所在索引
			};
		},
		methods:{
			//当上下滑动视频时触发事件监听
			changeSwiper(event){
				// console.log("滑动视频时相关参数",event);
				this.currentVideoIndex=event.detail.current;
				clearTimeout(timer);
				timer=setTimeout(()=>{
					if(this.touchStartY > this.touchEndY){//向上滑动
						// console.log("向上滑动");
						this.$refs["video"][this.currentVideoIndex].player();
						this.$refs["video"][this.currentVideoIndex-1].pause();
						this.touchStartY=0;
						this.touchEndY=0;
					}else{//向下滑动
						// console.log("向下滑动");
						this.$refs["video"][this.currentVideoIndex].player();
						this.$refs["video"][this.currentVideoIndex+1].pause();
						this.touchStartY=0;
						this.touchEndY=0;
					}
				},1)
			},
			//当手指触摸视频开始事件监听
			touchStart(event){
				// console.log("手指触摸视频开始相关参数",event);
				this.touchStartY=event.changedTouches[0].pageY;
			},
			//当手指触摸视频结束事件监听
			touchEnd(event){
				// console.log("手指触摸视频结束相关参数",event);
				this.touchEndY=event.changedTouches[0].pageY;
			},
			//子组件视频组件双击事件触发监听--实现双击点赞操作
			changeDblClick(index){
				this.$refs["rightOperate"][index].isLike=true;
			}
		}
	}
</script>

<style>
.qilin-box-videoList{
	width:100%;
	height:100%;
}
.qilin-box-videoList-swiper{
	width:100%;
	height:100%;
	position:relative;
}
.qilin-box-item{
	width:100%;
	height:100%;
}
</style>
